import {useState,useEffect} from 'react'
import { useParams } from 'react-router'
import axios from 'axios'
export default function Category(){
    //     let [count,setCount] = useState(5)
    //     let [arr,setArr]= useState([1,2,3])
           let [list,setList] = useState({})
           let [arr,setArr] = useState([])
        var params = useParams()
        // function add(){
        //     count++
        //     setCount(count)
        // }
        // function push(){
        //     setArr([...arr,4])
        // }

        useEffect(()=>{

            // console.log(params.id);
            axios.get('https://apipc-xiaotuxian-front.itheima.net/category?id='+params.id).then(res=>{
            // console.log(res.data.result);
            if (res.data.msg == '操作成功') {

                var list=res.data.result
                setList({...list})
                console.log(list);

                var arr=res.data.result.children
                setArr([...arr])
                console.log(arr);

            }
        })

        },[params.id])
        return (
        <div className="commonwidth top-category">
        <div className="sub-list">
          <h3>全部分类</h3>
          <ul>
        { arr.map((i,index)=>{

            return (<li key={index}
            >
              <a href="/#/">
                <img 
                src={i.picture}
                />
                <p>
                    { i.name }
                    </p>
              </a>

            </li>)
            })
        }

          </ul>
        </div>

        { arr.map((k,index)=>{
         return(<div className="homeclean" key={index}>
                <div className="cleanheader">
                    <p className="p1">- {k.name} -</p >
                    <p className="p2">温暖柔软，品质之选</p >
                    <span>查看全部</span>
                </div>
                <ul className="cleannav">
            { k.goods.map((item,index)=>{
                    return<li>
                        < img src={item.picture}/>
                        <p className="biref">{ item.name }</p >
                        <p className="biref2"> { item.desc }</p >
                        <p className="price">{ item.price }</p >
                    </li>
            })}
                </ul>
             </div>)

        })}
        



        {/* { arr.map((k,index)=>{

       
        return (<div className="ref-goods"
            key={index}
         >
          <div className="head">
            <h3>
                - { k.name } -
                </h3>
            <p className="tag">温暖柔软，品质之选</p>
            <a href="/#/" className="xtx-more">
              <span>查看全部</span>
              <i className="iconfont icon-angle-right"></i>
            </a>
          </div>
          { k.map((item,index)=>{

          
          return(<div className="body">
           
              <img
               src={item.picture} alt="" 
               />
              <p className="name ellipsis">
                  { item.name }
                  </p>
              <p className="desc ellipsis">
                  { item.desc }
                  </p>
              <p className="price">¥
              { item.price }
              </p>
        
          </div>)
          })
          }
        </div>)
          })} */}
      </div>



    )
    }
